<template>
  <div>
    <el-table
      border
      :height="tableHeight"
      :data="recordList"
      tooltip-effect="dark"
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="serialNumber" label="序号" align="center"></el-table-column>
      <el-table-column prop="beginAddress" label="起运地" align="center"></el-table-column>
      <el-table-column prop="endAddress" label="目的地" align="center"></el-table-column>
      <el-table-column prop="serialNumber" label="项目名称" align="center">
        <template slot-scope="scope">{{ scope.row.projectName }}</template>
      </el-table-column>
      <el-table-column prop="serialNumber" label="招标编号" align="center">
        <template slot-scope="scope">{{ scope.row.inviteId }}</template>
      </el-table-column>
      <el-table-column prop="goodsName" label="货物名称" align="center"></el-table-column>
      <el-table-column prop="unit" label="单位" align="center"></el-table-column>
      <el-table-column prop="quantity" label="预计货量" align="center"></el-table-column>
      <el-table-column prop="originalFreightRate" label="上游单价" align="center"></el-table-column>
      <el-table-column prop="boxType" label="箱型" align="center"></el-table-column>
      <el-table-column prop="size" label="尺寸" align="center"></el-table-column>
      <el-table-column prop="name" label="供应商" align="center"></el-table-column>
      <el-table-column prop="bidderMoney" label="下游报价" align="center"></el-table-column>
      <el-table-column prop="avgs" label="承运商报价平均值" align="center"></el-table-column>
      <el-table-column prop="profit" label="利润率" align="center"></el-table-column>
      <el-table-column prop="action" label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <div v-if="scope.row.isAccept == 1">
            <el-button>已入用</el-button>
            <el-button>已入用</el-button>
            <el-button>已入用</el-button>
            <el-button>已入用</el-button>
          </div>
          <div v-else-if="scope.row.isAccept == 2">
            <el-button>已入用</el-button>
            <el-button>已入用</el-button>
            <el-button>已入用</el-button>
          </div>
          <div v-else>
            <el-button>已入用</el-button>
            <el-button>已入用</el-button>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="project" label="单位工程" align="center"></el-table-column>
      <el-table-column prop="branch" label="分部工程" align="center"></el-table-column>
      <el-table-column prop="name" label="检测项目" align="center"></el-table-column>
      <el-table-column prop="constructionNum" label="施工完成数量" align="center"></el-table-column>
      <el-table-column prop="inspectionNum" label="报检数量" align="center"></el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import mergeCell from './mixin/mergeCell'
import { record } from './record.js'
export default {
  data() {
    return {
      exportParams: {},
      tableLoading: false,
      pos: 0,
      spanArr: [],
      page_export:0,
      recordList: [],
      record,
      tableData: [ // 假数据
        {
          id: 1,
          paragraph: 'TJ01',
          project: '单位工程',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 2,
          paragraph: 'TJ01',
          project: '单位工程',
          branch: '分部工程',
          billing: '月/季/年制度',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 3,
          paragraph: 'TJ01',
          project: '单位工程1',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 4,
          paragraph: 'TJ01',
          project: '单位工程2',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 5,
          paragraph: 'TJ02',
          project: '单位工程2',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 6,
          paragraph: 'TJ02',
          project: '单位工程1',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 7,
          paragraph: 'TJ02',
          project: '单位工程1',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 8,
          paragraph: 'TJ02',
          project: '单位工程',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
      ],
      paragraph_merageArr: [],  // 第一列进行合并操作时存放的数组变量
      paragraph_meragePos: 0, // 上面的数组的下标值
      project_merageArr: [],  // 第二列进行合并操作时存放的数组变量
      project_meragePos: 0,// 上面的数组的下标值
      branch_merageArr: [], // 第三列进行合并操作时存放的数组变量
      branch_meragePos: 0,// 上面的数组的下标值
    };
  },
  watch: {
  },
  mixins: [mergeCell],
  computed: {
    tableHeight() {
      return window.innerHeight - 160;
    }
  },
  methods: {
    merageInit() {
      // 在下文的时候会用到，对数据进行初始化是很有必要的
      this.paragraph_merageArr = [];
      this.paragraph_meragePos = 0;
      this.project_merageArr = [];
      this.project_meragePos = 0;
      this.branch_merageArr = [];
      this.branch_meragePos = 0;
    },
    // 合并多列专用
    merage() {
      // 前文的初始化数据函数
      this.merageInit();
      for (let i = 0; i < this.recordList.length; i++) {
        if (i === 0) {
          // 第一行必须存在
          this.paragraph_merageArr.push(1);
          this.paragraph_meragePos = 0;
          this.project_merageArr.push(1);
          this.project_meragePos = 0;
          this.branch_merageArr.push(1);
          this.branch_meragePos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.paragraph_meragePos 是 this.typeNameArr序号
          // 第一列
          if (this.recordList[i].serialNumber === this.recordList[i - 1].serialNumber) {
            this.paragraph_merageArr[this.paragraph_meragePos] += 1;
            this.paragraph_merageArr.push(0);
          } else {
            this.paragraph_merageArr.push(1);
            this.paragraph_meragePos = i;
          }
          // 第二列
          if (this.recordList[i].beginAddress === this.recordList[i - 1].beginAddress && this.recordList[i].serialNumber === this.recordList[i - 1].serialNumber) {
            this.project_merageArr[this.project_meragePos] += 1;
            this.project_merageArr.push(0);
          } else {
            this.project_merageArr.push(1);
            this.project_meragePos = i;
          }
          // // 第三列
          if (this.recordList[i].endAddress === this.recordList[i - 1].endAddress && this.recordList[i].serialNumber === this.recordList[i - 1].serialNumber) {
            this.branch_merageArr[this.branch_meragePos] += 1;
            this.branch_merageArr.push(0);
          } else {
            this.branch_merageArr.push(1);
            this.branch_meragePos = i;
          }
        }
      }
    },
    // 合并专用
    // objectSpanMethod({ rowIndex, columnIndex }) {
    //   if (columnIndex === 0 || columnIndex === 3 || columnIndex === 4) {
    //     // 第一列的合并方法row, column, 
    //     const row1 = this.paragraph_merageArr[rowIndex];
    //     const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
    //     return {
    //       rowspan: row1,
    //       colspan: col1,
    //     };
    //   } else if (columnIndex === 1) {
    //     // 第二列的合并方法
    //     const row2 = this.project_merageArr[rowIndex];
    //     const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
    //     return {
    //       rowspan: row2,
    //       colspan: col2,
    //     };
    //   } else if (columnIndex === 2) {
    //     // 第三列的合并方法
    //     const row3 = this.branch_merageArr[rowIndex];
    //     const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
    //     return {
    //       rowspan: row3,
    //       colspan: col3,
    //     };
    //   }
    // },
  },
  created() {
    // this.page_export = this.inspectionDetection.record_account.page_export;
    let record = []
    this.record.forEach((item, index) => {
      if (item.parit.length > 0) {
        item.parit.forEach(element => {
          record.push({
            ...element,
            serialNumber: index + 1,
            projectName: item.projectName,
            inviteId: item.inviteId,
            customName: item.customName
          })
        })
      }
    })
    this.recordList = record
    this.setTableRowSpan(this.recordList, [
      'serialNumber',
      'beginAddress',
      'endAddress'
    ])
    // console.log('recordList', this.recordList);
  },
  mounted() {
    this.merage()
  }
};
</script>
